<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <title>面经列表</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 14px;
            font-weight: normal;
        }
        i,em{
            font-style: normal;
        }
        b,strong{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        /* 列表页 */
        #list{
            width: 100%;
            background-color: #eee;
            overflow: hidden;
        }
        .list-con{
            margin: 40px;
            background-color: #fff;
            border-radius: 5px;
        }

        /* 面经内容 */
        #experience{
            width: 100%;
            background-color: #eee;
        }
        .experience-con{
            background-color: #fff;
            overflow: hidden;
        }
        .experience-con  ul{
            margin: 40px;
            margin-top: 10px;
        }
        /* 排序 */
        .experience-con h6{
            height: 22px;
            margin: 40px 40px 10px 40px;
        }
        .experience-con h6 em{
            color: #888;
            padding: 0 10px;
            font-size: 14px;
            line-height: 14px;
            height: 14px;
            display: inline-block;
            cursor: pointer;
        }
        .orderHeat{
            border-right: 1px solid #ddd;
        }
        .experience-con h6 .focus{
            color: #16c2c2;
        }
        .container li{
            padding: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .container li:hover{
            box-shadow: 0 0 10px #ddd;
        }
        .container li>a{
            display: inline-block;
            width: 100%;
        }
        .container li h2{
            cursor: pointer;
            margin-bottom: 10px;
        }
        .title{
            color: #333;
            font-size: 16px;

        }
        .title:hover{
            color: #16c2c2;
        }
        .company,.post{
            border-radius: 12px;
            border: 1px solid #ddd;
            display: inline-block;
            padding: 2px 10px;
            color: #333;
            font-size: 12px;
            margin-right: 2px;
            background: #fff;
            margin-bottom: 5px;
            line-height: 16px;
            margin-left: 5px;
        }
        .company:hover,.post:hover{
            color: #16c2c2;
            border: 1px solid #16c2c2;
        }
        .container li .text{
            font-size: 14px;
            color: #666;
            width: 96%;
            padding:0 2% 2%;
            outline: none;
            resize: none;
            border: none;
            background-color: #fff;
        }
        .exp_bottom{
            height: 40px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .exp_l{
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .exp_photo{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #ddd;
            overflow: hidden;
        }
        .exp_photo img{
            width: 100%;
            height: 100%;
        }
        .exp_l i{
            margin: 0 10px 0 6px;
            color: #42c1a2;
        }
        .exp_l em{
            color: #aaa;
        }
        .exp_r{
            display: flex;
            align-items: center;
            color: #999;
        }
        /* 点赞数 */
        .exp_collect{
            margin: 0 20px;
        }
        /* .exp_like:hover,.exp_collect:hover,.exp_answer:hover{
            color: #16c2c2;
        } */
        .active{
            color: #16c2c2;
        }

        /* 评价 */
        .comment-list{
            margin-top: 15px;
            display: none;
        }
        .module-head{
            font-size: 16px;
            color: #333;
            font-weight: bold;
        }
        .module-head .iconfont{
            color: #ff6547;
        }
        /* 评论容器 */
        .answer-list{
            padding: 20px;
        }
        .answer-list-item{
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }
        .answer-list-item dd{
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }
        .answer-list-item dd img{
            width: 100%;
            height: 100%;
        }
        .answer-list-item dt{
            flex: 1;
        }
        .answer-name{
            color: #418ac3;
        }
        .answer-txt{
            font-size: 14px ;
            line-height: 20px;
            color: #222;
            margin-bottom: 10px;
        }
        .answer-bottom{
            height: 20px;
            width: 100%;
        }
        .answer-bottom h4{
            float: left;
            font-size: 12px;
            color: #999;
        }
        .answer-bottom h5{
            float: right;
            font-size: 12px;
            color: #21a88b;
        }
        .answer-bottom h5 strong{
            margin-left: 12px;

        }
        .write-ans{
            padding: 10px;
            overflow: hidden;
        }
        .publish{
            float: left;
            width: 96%;
            resize: none;
            outline: none;
            padding: 2%;
        }
        .sub-ans{
            float: right;
            margin-top: 10px;
            border-radius: 5px;
            color: #fff;
            outline: none;
            border: none;
            width: 80px;
            height: 40px;
            background-color: #25bb9b;
        }
        /* 置顶 */
        .top{
            position: fixed;
            right: 10px;
            bottom: 90px;
            width: 50px;
            height: 50px;
            background-color: #777;
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
            z-index: 20;
        }
        .top:hover{
            background-color: #555;
        }
        .top .iconfont{
            font-size: 30px;
            color: #fff;
        }


        .template{
            display: none;
        }
        #ans-template{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 详情页 -->
    <div id="list">
        <div class="list-con">
            <!-- 面经内容 -->
            <div id="experience">
                <div class="experience-con">
                    <!-- 排序 -->
                    <h6>
                        <em class="orderHeat focus">按热度</em>
                        <em class="orderTime">按时间</em>
                    </h6>
                    <!-- 面经容器 -->
                    <ul class="container">
                    </ul>
                    <!-- 模板 -->
                    <li class="template">
                        <a target="_blank">
                            <h2>
                                <i class="title">猿辅导8.8面试经历（热乎）</i> 
                                <b class="company">字节跳动</b>
                                <strong class="post">前端开发</strong>
                            </h2>
                            <textarea disabled class="text"></textarea>
                        </a>
                        <div class="exp_bottom">
                            <div class="exp_l">
                                <div class="exp_photo">
                                    <img src="./images/1.png" alt="">
                                </div>
                                <i class="name">救救孩子吧007</i>
                                <em class="time">2020-08-09 17:07:46</em>
                            </div>
                            <div class="exp_r">
                                <!-- 点赞数 -->
                                <div class="exp_like">
                                    <span class="iconfont icon-diancai1-copy-copy"></span>
                                    <i class="like">10</i>
                                </div>
                                <!-- 收藏数 -->
                                <div class="exp_collect">
                                    <span class="iconfont icon-star-filled"></span>
                                    <i class="collect">10</i>
                                </div>
                                <!-- 回复数 -->
                                <div class="exp_answer">
                                    <span class="iconfont icon-pinglun1"></span>
                                    <i class="answer">10</i>
                                </div>
                            </div>
                        </div>
                        <!-- 评论 -->
                        <div class="comment-list">
                            <div class="module-head">
                                <span class="iconfont icon-huifu2"></span>
                                <i class="answer">1</i>
                                <b>条评论</b>
                            </div>
                            <!-- 评论容器 -->
                            <div class="answer-list">
                                <!-- 评论模板 -->
                                <dl class="answer-list-item" id="ans-template">
                                    <dd>
                                        <img src="https://uploadfiles.nowcoder.com/images/20181024/6658561_1540369004295_A6F1307132560023801A785F8358F8A8" alt="">
                                    </dd>
                                    <dt>
                                        <h2 class="answer-name">aaaaa</h2>
                                        <h3 class="answer-txt">fasfasfasfasfasfasfasfasfas</h3>
                                        <div class="answer-bottom">
                                            <h4>
                                                发表于
                                                <b class="answer-time">2020/07/08 08：00：00</b>
                                            </h4>
                                            <h5>
                                                <strong>赞(<em class="answer-like">1</em>)</strong>
                                                <strong>回复(<em class="answer-reply">0</em>)</strong>
                                            </h5>
                                        </div>
                                    </dt>
                                </dl>
                            </div>
                            <!-- 写评论 -->
                            <div class="write-ans">
                                <textarea placeholder="在这里添加你的评论" class="publish"></textarea>
                                <button class="sub-ans">提交评论</button>
                            </div>
                        </div>
                    </li>
                    
                </div>
            </div>
        </div>
        <!-- 置顶 -->
        <div class="top">
            <span class="iconfont icon-zhiding1"></span>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url:"http://127.0.0.1:84/getList",
                success(data){
                    let list = JSON.parse(data)
                    let template = $(".template")
                    list.forEach(item => {
                        let newLi = template.clone(true)
                        newLi.removeClass()
                        $(".container").append(newLi)

                        newLi.attr("data-index",item.id)
                        newLi.find(".title").html(item.title)
                        newLi.find(".company").html(item.company)
                        newLi.find(".post").html(item.post)
                        newLi.find(".text").html(item.text)
                        newLi.find("img").attr("src",item.photo)
                        newLi.find(".name").html(item.user)
                        newLi.find(".time").html(item.time)
                        newLi.find(".like").html(item.likes)
                        newLi.find(".collect").html(item.collect)
                        newLi.find(".answer").html(item.answer)

                        // 评论
                        newLi.find("#ans-template").attr("id","")
                        // textarea 高度由内容撑开
                        newLi.find(".text").each(function () {
                            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
                        }).on('input', function () {
                            this.style.height = 'auto';
                            this.style.height = (this.scrollHeight) + 'px';
                        });
                        // 点击显示评论
                        newLi.find(".exp_answer").click(function(){
                            newLi.find(".comment-list").slideToggle()
                        })
                    });
                }
            })
        })
        // 置顶
        $(".top").click(function(){
            document.documentElement.scrollTop = 0
        })

        // 点赞
        $(".exp_like").click(function(){
            $(this).toggleClass("active")
            if($(this).hasClass("active")){
                $(this).find(".like").html(parseInt($(this).find(".like").html()) + 1)
            }
            else{
                $(this).find(".like").html(parseInt($(this).find(".like").html()) - 1)
            }

            $.ajax({
                url:"http://127.0.0.1:84/addListLike",
                data:{
                    id:$(this).closest("li").attr("data-index"),
                    likes:$(this).find(".like").html()
                },
                success(data){
                   
                }
            })
        })

        // 收藏
        $(".exp_collect").click(function(){
            $(this).toggleClass("active")
            if($(this).hasClass("active")){
                $(this).find(".collect").html(parseInt($(this).find(".collect").html()) + 1)

                let company = $(this).closest("li").find(".company").html()
                let post = $(this).closest("li").find(".post").html()
                let title = $(this).closest("li").find(".title").html()
                let user = $(this).closest("li").find(".name").html()
                let time = $(this).closest("li").find(".time").html()
                let likes = $(this).closest("li").find(".like").html()
                let collect = $(this).closest("li").find(".collect").html()
                let photo = $(this).closest("li").find(".exp_photo img").attr("src")
                let txt = $(this).closest("li").find(".text").html()
                let username = window.location.href.split("?")[1].split("=")[1]


                $.ajax({
                    url:"http://127.0.0.1:84/addListCollect",
                    data:{
                        username,
                        company,
                        post,
                        title,
                        user,
                        time,
                        likes,
                        collect,
                        photo,
                        txt,
                    },
                    success(data){
                       
                    }
                })
            }
            else{
                $(this).find(".collect").html(parseInt($(this).find(".collect").html()) - 1)

                $.ajax({
                    url:"http://127.0.0.1:84/deleteListCollect",
                    data:{
                        title:$(this).closest("li").find(".title").html()
                    },
                    success(data){
                       
                    }
                })
            }

        })
            
    </script>
</body>
</html>